/**
* 描述：子账号管理
*/
<style lang="scss" scoped>
  @import 'src/styles/company/index';
</style>
<template>
  <div class="content">
    <div class="com-main-title">
      <span class="tit">子账号管理</span>
      <div class="clear"></div>
    </div>
    <!--搜索条部分-->
    <div class="search-bar">
      <div class="oneImput fl wth160px">
        <el-input v-model="searchData.name" placeholder="名称" size="small"></el-input>
      </div>
      <div class="oneImput fr">
        <el-button type="primary" class="search-button fl" icon="search" @click="search" size="small">搜索</el-button>
        <el-button type="success" class="search-button fl" @click="clickAddOrUpdate()" size="small">新增</el-button>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>

    <!--table部分-->
    <div class="table-content">
      <el-table
        size="mini"
        :data="list"
        v-loading="loading"
        :element-loading-text="loadingText"
        highlight-current-row
        border
        style="width: 100%">
        <el-table-column
          prop="realName"
          align="center"
          label="真实姓名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="手机号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="sex"
          align="center"
          label="性别"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.sex | sexType }}
          </template>
        </el-table-column>
        <el-table-column
          prop="birth"
          align="center"
          label="生日"
          show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.birth | substringDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="role"
          align="center"
          show-overflow-tooltip
          label="角色">
          <template slot-scope="scope">
            {{ scope.row.role | subaccountType }}
          </template>
        </el-table-column>
        <el-table-column
          prop="job"
          align="center"
          show-overflow-tooltip
          label="工作职务">
        </el-table-column>
        <el-table-column
          prop="createdAt"
          align="center"
          show-overflow-tooltip
          label="注册时间">
          <template slot-scope="scope">
            {{ scope.row.createdAt | substringDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px" fixed="right" :class="`xxx`" style="background-color: red">
          <template slot-scope="scope">
            <div v-show="scope.row.role === 'recruiter'">
              <a class="cz" @click="clickAddOrUpdate(scope.row)">编辑</a>
              <a class="cz" v-show="!scope.row.banned" @click="banFun(scope.row.id)">禁用</a>
              <a class="cz" v-show="scope.row.banned" @click="unbanFun(scope.row.id)">解禁</a>
              <!--<a class="cz" @click="clickChangePhone(scope.row)">更换手机号</a>-->
              <a class="cz" @click="deleteFun(scope.row.id)">删除</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <hy-page v-show="pageShow"
               :current-page="searchData.page"
               :page-size="searchData.limit"
               :total-element="totalElement"
               @current-change="currentChange"></hy-page>
    </div>

    <!--新增、修改-->
    <!--查看简历-->
    <Modal v-model="addInfoShow" :mask-closable="false" width="520" :closable="false" class="noTopBottomBorder">
      <p slot="header" style="color:#000;text-align:center;font-weight: bold;font-size: 18px;">
        <span>{{title}}</span>
      </p>
      <div style="transform: translateX(0%) translateZ(0px);" v-if="addInfoShow">
        <Form ref="baseForm" :model="baseForm" :rules="baseFormRule" :label-width="100" class="main-add-1 formNoRadius02">
          <FormItem label="手机号：" prop="phone" v-show="!isUpdate">
            <i-input v-model="baseForm.phone" :maxlength="25" placeholder="手机号"></i-input>
          </FormItem>
          <FormItem label="密码：" prop="password" v-show="!isUpdate">
            <i-input type="password" v-model="baseForm.password" :maxlength="20" :disabled="isUpdate"  placeholder="密码6-20位，必须同时含有数字、字母"></i-input>
          </FormItem>
          <FormItem label="确认密码" prop="confirmPassword" v-show="!isUpdate">
            <i-input type="password" v-model="baseForm.confirmPassword" :disabled="isUpdate" :maxlength="20"  placeholder="密码6-20位，必须同时含有数字、字母"></i-input>
          </FormItem>
          <FormItem label="真实姓名：" prop="realName">
            <i-input v-model="baseForm.realName" :maxlength="25" placeholder="至少2个字符，最多25个字符"></i-input>
          </FormItem>
          <FormItem label="性别：" prop="sex" :required="true">
            <Select v-model="baseForm.sex" placeholder="性别：">
              <template>
                <i-option v-for="item in sexList" :value="item.value" :key="item.value">{{item.label}}</i-option>
              </template>
            </Select>
          </FormItem>
          <FormItem label="工作职务：" prop="job">
            <i-input v-model="baseForm.job" :maxlength="100" placeholder="工作职务"></i-input>
          </FormItem>
          <FormItem label="生日：" prop="birth">
            <Date-picker type="date" placement="bottom-start" placeholder="生日" class="date"
                         :value="baseForm.birth" format="yyyy-MM-dd"
                         @on-change="baseForm.birth=$event" :editable="false"></Date-picker>
          </FormItem>
          <FormItem label="座机号：" prop="tel">
            <i-input v-model="baseForm.tel" :maxlength="25" placeholder="座机号"></i-input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" style="width:220px;margin:0 auto;">
        <i-button type="primary" size="large" @loading="addLoading" @click="addOrUpdate" style="width:100px;">确定</i-button>
        <i-button size="large" @click="addInfoShow = false" style="width:100px;">取消</i-button>
      </div>
    </Modal>
    <!--修改手机号-->
    <Modal v-model="phoneFormShow" :mask-closable="false" :closable="false" width="320" class="noTopBottomBorder">
      <p slot="header" style="color:#000;text-align:center;font-weight: bold;font-size: 18px;">
        <span>修改手机号</span>
      </p>
      <div style="transform: translateX(0%) translateZ(0px);">
        <Form ref="phoneForm" :model="phoneForm" :rules="phoneFormFormRule" :label-width="90" class="main-add-1 formNoRadius02">
          <FormItem label="手机号：" prop="phone">
            <i-input v-model="phoneForm.phone" :disabled="isUpdate" placeholder="手机号" style="width:130px;"></i-input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer" style="width:220px;margin:0 auto;">
        <i-button type="primary" size="large" @loading="addLoading" @click="changePhone" style="width:100px;">确认修改</i-button>
        <i-button size="large" @click="phoneFormShow = false" style="width:100px;">取消</i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import list from '@/js/mixins/list';
  import hyHandler from '@/components/handler/handler';
  import { queryList, queryCount, addFun, updateFun, banFun, unbanFun, deleteFun, changePhone } from '@/service/company/subaccount/subaccountMService';
  export default {
    mixins: [list],
    components: {
      hyHandler
    },
    data () {
      return {
        loading: true,
        searchData: {},
        addInfoShow: false,
        baseForm: {
          sex: 1
        },
        cityList: [],
        districtList: [],
        sexList: [
          {value: 1, label: '男'},
          {value: 2, label: '女'}
        ],
        baseFormRule: {},
        title: '新增',
        isUpdate: false,
        addLoading: false,
        phoneForm: {},
        phoneFormShow: false,
        phoneFormFormRule: {
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur change'},
            {pattern: '^(1[3,4,5,6,7,8])\\d{9}$', message: '手机号格式不对', trigger: 'blur change'}
          ]
        }
      };
    },
    methods: {
      async _getList () {
        this.loading = true;
        let result = await queryList(this.searchData);
        let temp = await queryCount(this.searchData);
        if (!result.data.length) result.data = null;
        this.list = result.data || [];
        this.totalElement = temp.data || 0;
        this.loading = false;
      },
      // 点击新增、修改
      clickAddOrUpdate (row) {
        this.isUpdate = false;
        this.title = '新增';
        this.baseForm = {
          sex: 1
        };
        if (row) {
          this.baseFormRule = {
            realName: [
              {required: true, message: '姓名不能为空', trigger: 'blur change'}
            ],
            job: [
              {required: true, message: '工作职务不能为空', trigger: 'blur change'}
            ]
          };
          this.title = '修改';
          this.isUpdate = true;
          this.baseForm = row;
        } else {
          this.baseFormRule = {
              password: [
              {required: true, message: '密码不能为空', trigger: 'blur change'},
              {pattern: '^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%’+*-:;^_`0-9A-Za-z]{6,20}$', message: '密码6-20位，必须同时含有数字、字母', trigger: 'blur change'}
            ],
              confirmPassword: [
              {required: true, message: '确认密码不能为空', trigger: 'blur change'},
              {validator: (rule, val, callback) => {
                  if (this.baseForm.password !== val) {
                    callback('两次输入的密码不一致');
                  } else {
                    callback();
                  }
                }}
            ],
              realName: [
              {required: true, message: '姓名不能为空', trigger: 'blur change'}
            ],
              phone: [
              {required: true, message: '手机号不能为空', trigger: 'blur change'},
              {pattern: '^(1[3,4,5,6,7,8])\\d{9}$', message: '手机号格式不对', trigger: 'blur change'}
            ],
              job: [
              {required: true, message: '工作职务不能为空', trigger: 'blur change'}
            ]
          };
        }
        this.addInfoShow = true;
      },
      // 关闭新增、修改
      closeAddInfo () {
        this.addInfoShow = false;
        this.phoneFormShow = false;
      },
      // 提交新增修改
      addOrUpdate () {
        this.$refs.baseForm.validate(async (valid) => {
          if (valid) {
            try {
              this.addLoading = true;
              let paylaod = Object.assign({}, this.baseForm);
              if (paylaod.birth) paylaod.birth = this._hyTool.DateFormat(new Date(paylaod.birth), 'yyyy-MM-dd hh:mm:ss');
              if (this.title === '新增') {
                paylaod.username = 'zcw' + paylaod.phone;
                await addFun(paylaod);
              } else {
                await updateFun({id: this.baseForm.id}, paylaod);
              }
              this._getList();
              this.addInfoShow = false;
              this.addLoading = false;
              this.$Notice.success({title: this.title + '成功'});
            } catch (e) {
              this.addInfoShow = false;
            }
          }
        });
      },
      // 禁用
      banFun (id) {
        this.$confirm('确定禁用？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await banFun({id: id});
          this.$Notice.success({title: '禁用成功'});
          this.currentChange(1);
        }).catch(() => {
        });
      },
      // 解禁
      unbanFun (id) {
        this.$confirm('确定解禁？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await unbanFun({id: id});
          this.$Notice.success({title: '解禁成功'});
          this.currentChange(1);
        }).catch(() => {
        });
      },
      // 删除
      deleteFun (id) {
        this.$confirm('确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await deleteFun({id: id});
          this.$Notice.success({title: '删除成功'});
          this.currentChange(1);
        }).catch(() => {
        });
      },
      // 点击修改手机号
      clickChangePhone (row) {
        this.phoneForm = row;
        this.phoneFormShow = true;
      },
      // 确认修改手机号
      changePhone () {
        this.$refs.phoneForm.validate(async (valid) => {
          if (valid) {
            try {
              this.addLoading = true;
              await changePhone({id: this.phoneForm.id}, {phone: this.phoneForm.phone});
              this._getList();
              this.phoneFormShow = false;
              this.addLoading = false;
              this.$Notice.success({title: '手机更换成功'});
            } catch (e) {
              this.addInfoShow = false;
            }
          }
        });
      }
    }
  };
</script>
